import { getLast7DayCountService } from "@/service/blank-screen"
import { useRequest } from "ahooks"
import { Card, Spin } from "antd"
import React, { FC } from "react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

type dayCountType = {
    date: string
    count: number
}

const WhiteScreenChart: FC = () => {
    async function getLast7DayCount() {
        const data = (await getLast7DayCountService()) as dayCountType[]
        return data
    }

    const { loading, data = [] } = useRequest(getLast7DayCount)

    return (
        <Card title="白屏监测">
            {loading && (
                <div style={{ textAlign: "center", marginTop: "20px" }}>
                    <Spin />
                </div>
            )}
            {!loading && (
                <div style={{ height: "300px" }}>
                    <ResponsiveContainer width="100%" height="100%">
                        <LineChart
                            data={data}
                            margin={{
                                top: 5,
                                right: 30,
                                left: 20,
                                bottom: 5
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="date" />
                            <YAxis />
                            <Tooltip />
                            {/* <Legend /> */}
                            <Line type="monotone" dataKey="count" stroke="#8884d8" activeDot={{ r: 8 }} />
                        </LineChart>
                    </ResponsiveContainer>
                </div>
            )}
        </Card>
    )
}

export default WhiteScreenChart
